<%--
  Created by IntelliJ IDEA.
  User: name
  Date: 2023/10/11
  Time: 15:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>报损信息</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">

    <el-date-picker
            v-model="timevalue"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
    </el-date-picker>

    <el-select v-model="searchBranchList" clearable placeholder="--请选择分店--" style="width: 15%">
        <el-option
                v-for="item in branchList"
                :key="item.branchid"
                :label="item.branchname"
                :value="item.branchid">
        </el-option>
    </el-select>
    <el-button
            type="primary"
            @click="search()">查询
    </el-button>


    <el-table
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center'}"
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                show-overflow-tooltip
                prop="invenid"
                label="盘点编号"
        >
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                prop="invenstaffName"
                label="报损员"
        >
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                prop="examstaffname"
                label="批准人"
        >
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                prop="examtime"
                label="报损时间"
        >
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                prop="branchname"
                label="所属分店"
        >
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="detailDialog(scope.row)">详细信息</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--详细信息的对话框
     visible.sync：控制对话框的显示true和隐藏false
 -->
    <el-dialog
            title="详细信息"
            :visible.sync="dialogVisible"
            width="40%"
    >

        <el-table
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                :data="detailTable"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    show-overflow-tooltip
                    prop="lid"
                    label="报损详情id"
            >
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="goodsname"
                    label="商品名称"
            >
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="invennum"
                    label="盘点数量"
            >
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="lossnum"
                    label="报损数量"
            >
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="currentPage2"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2">
        </el-pagination>
    </el-dialog>


</div>


<script>

    let app = new Vue({
        el: "#app",
        data: {
            //分页数据
            currentPage: 1,
            pageSize: 5,
            total: null,
            //详细信息里的分页数据
            currentPage2: 1,
            pageSize2: 5,
            total2: null,
            //表格数据
            tableData: [],
            //控制弹出对话框
            dialogVisible: false,
            dialogVisible2: false,
            //添加表单对象
            addForm: {},

            //审核状态的标签
            tagItem: [],

            //详细信息的表格数据
            detailTable: [],

            //下拉框集合
            branchList: [],
            //搜索栏的值
            searchBranchList: "",

            //时间选择的值
            timevalue: ['',''],
            startTime:"",
            endTime:""


        },
        created() {
            this.initTable();
            this.searchBranch();
        },
        methods: {
            initTable() {
                axios.get("/inventory/findAllInventoryOnlyPass?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&state=2").then(resq => {
                    this.tableData = resq.data.data.list
                    this.total = resq.data.data.total
                    this.initTag()

                })
            },
            //标签数组初始化
            initTag() {
                for (let x of this.tableData) {
                    switch (x.state) {
                        case 1:
                            let obj1 = {
                                type: "warning",
                                label: "待审核"
                            }
                            this.tagItem.push(obj1)
                            break;
                        case 2:
                            let obj2 = {
                                type: "success",
                                label: "审核通过"
                            }
                            this.tagItem.push(obj2)
                            break;
                        case 3:
                            let obj3 = {
                                type: "danger",
                                label: "审核驳回"
                            }
                            this.tagItem.push(obj3)
                            break;
                    }
                }
            },
            //主表的分页操作
            handleSizeChange(val) {
                this.pageSize = val
                this.search(val)
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.search(val)
            },

            //详细信息表的分页操作
            handleSizeChange2(val) {
                this.pageSize2 = val
                this.getDetailTable()
            },
            handleCurrentChange2(val) {
                this.currentPage2 = val
                this.getDetailTable()
            },


            //详细信息按钮事件
            detailDialog(val) {
                this.dialogVisible = true;
                this.detailinvenid = val.invenid
                this.getDetailTable()

            },
            //详细信息表格获取数据
            getDetailTable() {
                axios.get("/inventory/findInventoryGoodsByInventoryID?currentPage=" + this.currentPage2 + "&pageSize=" + this.pageSize2 + "&invenid=" + this.detailinvenid).then(resp => {
                    this.detailTable = resp.data.data.list
                    this.total2 = resp.data.data.total
                })
            },

            /**
             * 获取下拉框所需的数据
             * **/
            searchBranch() {
                axios.post("/goods/searchBranch").then(resp => {
                    this.branchList = resp.data.data
                })
            },

            //根据分店查 toGMTString toLocaleDateString toLocaleString toLocaleTimeString toTimeString  findAllInventoryOnlyPass
            search(val) {
                if(val!=null){
                    this.currentPage=val
                }else{
                    this.currentPage=1
                }

                //清空后再赋空值,避免报错
                if (!this.timevalue) {
                    this.timevalue = ['','']
                }

                this.currentPage=1

                axios.post("/inventory/findAllInventoryOnlyPass?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&startTime=" + this.timevalue[0] + "&endTime=" + this.timevalue[1] + "&branchid=" + this.searchBranchList + "&state=2").then(resq => {
                    this.tableData = resq.data.data.list
                    this.total = resq.data.data.total
                    this.initTag()
                })

            }


        }
    })


</script>

</body>
</html>
